<template>
  <view>
    <view style="display: flex; flex-direction: row; height: 100px; justify-content: center; align-items: center;">
      <image src="/static/images/purse/purse.png" style="width: 50px; height: 50px;"></image>
      <text style="font-size: 35px; color: red; font-weight: bold; margin-left: 6px;">{{ balance }}元</text>
    </view>

    <view class="content-section">
      <view class="menu-list" style="margin: 0;">
        <view class="list-cell list-cell-arrow" @click="seePurseWater">
          <view class="menu-item-box">
            <view class="iconfontMe iconMe-shouzhiliushui menu-icon"></view>
            <view>查看流水明细</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="recharge">
          <view class="menu-item-box">
            <view class="iconfontMe iconMe-chongzhi menu-icon"></view>
            <view>充值</view>
          </view>
        </view>
      </view>
    </view>

    <view>
      <!-- 输入框示例 -->
      <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog ref="inputClose" mode="input" title="充值金额：" confirmText="充值"
                          @confirm="dialogInputConfirm"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import {addWater, getUserBalance} from "@/api/qd/water";
import store from "@/store";

export default {
  data() {
    return {
      balance: 23,
    }
  },
  onLoad() {
    this.getUserBalance();
  },
  methods: {
    getUserBalance() {
      getUserBalance(store.getters.userId).then(res => {
        this.balance = res.data;
      })
    },
    seePurseWater() {
      this.$tab.navigateTo('/pages/mine/purse/purseWater')
    },
    recharge() {
      this.$refs.inputDialog.open()
    },
    dialogInputConfirm(val) {
      let tradeWaterAddReq = {
        userId: store.getters.userId,
        amount: val,
        type: 10,
      }
      addWater(tradeWaterAddReq).then(res => {
        // 关闭窗口后，恢复默认内容
        this.$refs.inputDialog.close();
        this.$modal.msgSuccess("充值成功！");
        this.getUserBalance();
      }).catch(err => {
        reject(err);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
